<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @cell-mouse-enter="enterCell"
    >
      <el-table-column
        header-align="center"
        align="center"
        prop="id"
        label="编号"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="name"
        label="名称"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="type"
        label="类型"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="account"
        label="账号"
      >
      </el-table-column>
      <!-- <el-table-column
        label="国有土地使用证"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="show_supporting_marterials(scope.row.state_owned_land_use)"
            >查看</el-button
          >
        </template>
      </el-table-column>

      <el-table-column
        label="建设用地规划许可证"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="
              show_supporting_marterials(scope.row.construction_land_planning)
            "
            >查看</el-button
          >
        </template>
      </el-table-column>

      <el-table-column
        label="建设工程规划许可证"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="
              show_supporting_marterials(
                scope.row.construction_project_planning
              )
            "
            >查看</el-button
          >
        </template>
      </el-table-column>

      <el-table-column
        label="建设工程开工证"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="
              show_supporting_marterials(
                scope.row.construction_project_commencement
              )
            "
            >查看</el-button
          >
        </template>
      </el-table-column>

      <el-table-column
        label="商品房内／外销预／销售许可证"
        header-align="center"
        align="center"
        width="150px"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="
              show_supporting_marterials(
                scope.row.commercial_housing_sales_license
              )
            "
            >查看</el-button
          >
        </template>
      </el-table-column> -->

      <el-table-column
        label=""
        header-align="left"
        align="center"
        width="300px"
      >
        <template slot-scope="scope">
          <div>
            <el-button type="primary" :size="small" @click="check(scope.row)"
              >查看</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="width"
      :append-to-body="true"
    >

      <div>
        <template v-if="currentItem.type=='开发商'">
             <el-descriptions
         
          title="证明材料"
          :column="1"
          border
        >
    
          <el-descriptions-item>
            <template slot="label"> 《国有土地使用证》 </template>
            <el-image
              style="width: 100px; height: 100px"
              :src="currentItem.srcList[0]"
              :preview-src-list="currentItem.srcList"
            >
            </el-image>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 《建设用地规划许可证》 </template>
            <el-image
              style="width: 100px; height: 100px"
              :src="currentItem.srcList[1]"
              :preview-src-list="currentItem.srcList"
            >
            </el-image>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 《建设工程规划许可证》 </template>
            <el-image
              style="width: 100px; height: 100px"
              :src="currentItem.srcList[2]"
              :preview-src-list="currentItem.srcList"
            >
            </el-image>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 《建设工程开工证》 </template>
            <el-image
              style="width: 100px; height: 100px"
              :src="currentItem.srcList[3]"
              :preview-src-list="currentItem.srcList"
            >
            </el-image>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 《商品房内／外销预／销售许可证》 </template>
            <el-image
              style="width: 100px; height: 100px"
              :src="currentItem.srcList[4]"
              :preview-src-list="currentItem.srcList"
            >
            </el-image>
          </el-descriptions-item>
        </el-descriptions>
        </template>
        <template v-else>
      
             <el-descriptions
         
          title="证明材料"
          :column="1"
          border
        >

          <el-descriptions-item>
            <template slot="label"> 《经营许可证》 </template>
            <el-image
              style="width: 100px; height: 100px"
              :src="currentItem.srcList[0]"
              :preview-src-list="currentItem.srcList"
            >
            </el-image>
          </el-descriptions-item>
        </el-descriptions>
        </template>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">拒绝</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >同意</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    check(row) {
      this.dialogVisible = true;
      this.currentItem = row;
      this.currentItem.srcList = []
      if(this.currentItem.type=='开发商'){
        this.currentItem.srcList.push(this.currentItem.state_owned_land_use)
        this.currentItem.srcList.push(this.currentItem.construction_land_planning)
        this.currentItem.srcList.push(this.currentItem.construction_project_planning)
        this.currentItem.srcList.push(this.currentItem.construction_project_commencement)
        this.currentItem.srcList.push(this.currentItem.commercial_housing_sales_license)
      }else{
         this.currentItem.srcList.push(this.currentItem.business_license)
      } 
      
    },
    show_supporting_marterials(url) {
      console.log(url);
    },
  },
  data() {
    return {
      currentItem: {
        srcList:["","","","",""]
      },
      dialogVisible: false,
      tableData: [
        {
          id: "0001",
          name: "钱记梨园",
          type: "开发商",
          account: "qian123456",
          password: "1234556",
          licence: ["url1", "url2"],
          state_owned_land_use:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.hy-online.com%2Fupfile%2Fnews%2F201701%2F20170112_1484214859.jpg&refer=http%3A%2F%2Fwww.hy-online.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634194530&t=8d5e307f5318c627cfca20f8051a4259",
        construction_land_planning:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.hy-online.com%2Fupfile%2Fnews%2F201701%2F20170112_1484214859.jpg&refer=http%3A%2F%2Fwww.hy-online.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634194530&t=8d5e307f5318c627cfca20f8051a4259",
        construction_project_planning:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.hy-online.com%2Fupfile%2Fnews%2F201701%2F20170112_1484214859.jpg&refer=http%3A%2F%2Fwww.hy-online.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634194530&t=8d5e307f5318c627cfca20f8051a4259",
        construction_project_commencement:
         "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170613%2F80e5fc2772734ae893021af2e24e6602_th.jpg&refer=http%3A%2F%2Fimg.mp.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634194506&t=e60bd8c9f733157a278562fc842aa486",
        commercial_housing_sales_license: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.hy-online.com%2Fupfile%2Fnews%2F201701%2F20170112_1484214859.jpg&refer=http%3A%2F%2Fwww.hy-online.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634194530&t=8d5e307f5318c627cfca20f8051a4259",
        },
        {
          id: "0002",
          name: "国际超盟",
          type: "代理机构",
          account: "chao123456",
          password: "1234556",
          business_license:"https://img0.baidu.com/it/u=1539066374,2018868427&fm=26&fmt=auto&gp=0.jpg"
        },
        {
          id: "0003",
          name: "潮签公寓",
          type: "开发商",
          account: "qc123456",
          password: "1234556",
          licence: ["url1", "url2"],
          state_owned_land_use: "url1",
          construction_land_planning: "url2",
          construction_project_planning: "url3",
          construction_project_commencement: "url4",
          commercial_housing_sales_license: "url5",
        },
      ],
    };
  },
};
</script>

<style scoped>
</style>